<template>
  <div class="app-main">
    <div class="divWarehouseAdd">
      <el-form
        :inline="true"
        ref="Form"
        class="demo-form-inline"
        :model="formData"
      >
        <el-row>
          <el-form-item label="仓库编码">
            <el-input
              style="width: 330px"
              :disabled="true"
              v-model="formData.code"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="仓库名称"
            :rules="[
              { required: true, message: '请输入仓库名称', trigger: 'blur' },
            ]"
          >
            <el-input
              placeholder="请输入"
              style="width: 330px"
              v-model="formData.name"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="仓库类型"
            :rules="[
              { required: true, message: '请选择仓库类型', trigger: 'blur' },
            ]"
          >
            <el-select
              placeholder="请选择"
              style="width: 330px"
              v-model="formData.type"
            >
              <el-option label="中转仓" value="ZZ"></el-option>
              <el-option label="加工仓" value="JG"></el-option>
              <el-option label="储备仓" value="CB"></el-option>
              <el-option label="冷藏仓" value="LC"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            label="省/市/区"
            :rules="[
              { required: true, message: '请选择区域', trigger: 'blur' },
            ]"
          >
            <el-cascader
              style="width: 740px"
              v-model="selectedOptions"
              :options="options"
              @change="handleChange"
              placeholder="请选择"
            ></el-cascader>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="详细地址">
            <el-input
              placeholder="请输入"
              style="width: 740px"
              v-model="formData.address"
            ></el-input>
          </el-form-item>
          <el-form-item label="仓库状态" style="margin-left: 50px">
            <el-radio v-model="formData.status" label="1">启用</el-radio>
            <el-radio v-model="formData.status" label="0">停用</el-radio>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="仓库面积">
            <el-input
              v-model="formData.surface"
              placeholder="请输入"
              style="width: 330px"
            >
              <template slot="append">m²</template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="负责人"
            :rules="[
              { required: true, message: '请输入负责人', trigger: 'blur' },
            ]"
          >
            <el-input
              placeholder="请输入"
              style="width: 330px"
              v-model="formData.personName"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              placeholder="请输入"
              style="width: 330px"
              v-model="formData.phone"
            ></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 400px; margin-top: 30px">
            <el-button class="un" @click="$router.push('/warehouseManagement')"
              >返回</el-button
            >
            <el-button class="minor" @click="sumbit">提交</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import { CK, newAdd } from '@/api/home'
export default {
  data () {
    return {
      options: regionData,
      selectedOptions: [],
      infoForm: {
        province: '',
        city: ''
      },
      formData: {
        code: '',
        address: '',
        location: '',
        status: '1',
        name: '',
        surface: '',
        personName: '',
        phone: '',
        type: ''
      }
    }
  },
  created () {
    this.codeList()
  },
  methods: {
    // 仓库编码
    async codeList () {
      const res = await CK()
      // console.log(res.data.data)
      this.formData.code = res.data.data
    },
    // 提交
    async sumbit () {
      // this.$refs.Form.validate()
      await newAdd({
        surface: this.formData.surface,
        personName: this.formData.personName,
        code: this.formData.code,
        address: this.formData.address,
        location: this.formData.location,
        name: this.formData.name,
        type: this.formData.type,
        status: this.formData.status,
        phone: this.formData.phone,
        city: this.selectedOptions[1],
        area: this.selectedOptions[2],
        province: this.selectedOptions[0]
      })
      this.$router.push('/warehouseManagement')
    },
    // 省市区
    handleChange () {
      this.formData.location = ''
      for (let i = 0; i < this.selectedOptions.length; i++) {
        this.formData.location += CodeToText[this.selectedOptions[i]] + '-'
      }
      this.infoForm.province = this.formData.location.split('-'[0])
      this.infoForm.city = this.formData.location.split('-'[1])
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  min-height: calc(100vh - 50px);
  background-color: #fdfafa;
  width: 100%;
  position: relative;
  overflow: hidden;
  .divWarehouseAdd {
    height: 509px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    margin-top: 20px;
    margin-left: 29px;
    margin-right: 29px;
    padding-top: 31px;
    padding-bottom: 30px;
    .el-row {
      margin-bottom: 55px;
      margin-left: 50px;
      .un {
        background: #f8f5f5;
        color: #332929;
        height: 40px;
        border-radius: 20px;
        border: 0;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        // line-height: 40px;
        padding-left: 26px;
        padding-right: 26px;
        cursor: pointer;
        outline: 0;
        width: 170px;
        margin: 0 15px;
      }
      .minor {
        width: 170px;
        margin: 0 15px;
        height: 40px;
        border-radius: 20px;
        border: 0;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        // line-height: 40px;
        padding-left: 26px;
        padding-right: 26px;
        cursor: pointer;
        outline: 0;
        background: #ffb200;
        color: #332929;
      }
    }
    // .divForm {
    //   padding-left: 30px;
    //   padding-right: 30px;
    //   .demo-ruleForm {
    //     .el-row {
    //       margin-left: -15px;
    //       margin-right: -15px;
    //       position: relative;
    //       box-sizing: border-box;
    //     }
    //   }
    // }
    // .buttonBox {
    //   padding: 25px 0 0;
    //   margin: 0 -30px -5px;
    //   border-top: 1px solid #f5efee;
    //   text-align: center;
    // }
  }
}
</style>
